/**
* @Description: 工程列表-已完工-工程量页面
* @author:
*/

<template>
  <view class="task-monitor-main">
    <nav-bar class="header chooise" back title="工程量" @goBack="goBack" />
    <view class="contentwrap">
      <van-field v-model="queryOptions.projectName" label="工程名称" type="textarea" autosize input-align="right" disabled/>
      <van-field v-model="queryOptions.siteName" label="站点名称" input-align="right" disabled/>
      <view class="content">
        <view class="devicetypelist">
          <view v-for="(item,index) in netypeList" :key="index">
            <view class="titlename" :class="['item',{selectTree: isShowActive === index}]"
                  @click="onchangeTab(item,index)">{{ item.engr_type_name }}({{ item.accumulate }}/{{ item.amount }})
            </view>
            <view v-show="isShowActive === index" class="secondlist">
              <view v-for="(ite,index1) in item.netypeRecords" :key="index1"
                    :class="['ite',{selectTree: ischildActive === index1}]" @click="onchangeChildTab(ite,index1)">
                {{ ite.ne_type_name }}({{ ite.accumulate }}/{{ ite.amount }})
              </view>
            </view>
          </view>
        </view>
        <view class="devices">
          <view class="commonbj deviceItem"
                v-for="(item,index) in taskList"
                :key="index"
                @click="chooseItem(item,index)"
                :class="['item',{chooseList: item.selected}]">
            <view class="deviceItemTitle">
              <view class="name">{{ item.NE_SN }}</view>
              <view class="statebox">
                <view class="ishide" v-if="item.IS_HIDE == 1">{{ item.IS_HIDE == 1 ? '隐' : '' }}</view>
<!--                <view class="state">{{ item.STATUS_NAME }}</view>-->
              </view>
            </view>
            <view class="deviceItemLabel">
              <view class="steps">
                <view :class="item.IS_INSTALL === '1' ? {active:isActive}:''" class="stepItem"
                      @click="jump('construction',item)">安装
                </view>
                <view :class="item.IS_ALONE === '1' ? {active:isActive}:''" class="stepItem"
                      @click="jump('construction',item)">单机
                </view>
                <view :class="item.IS_NETWORK === '1' ? {active:isActive}:''" class="stepItem"
                      @click="jump('construction',item)">联网
                </view>
                <view :class="item.STATUS_EXAM !== '0' ? {active:isActive}:''" class="stepItem"
                      @click="jump('construction-transportation')">建转运
                </view>
              </view>

            </view>

          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "../../../components/common/nav-bar";
import {mapGetters} from "vuex";
import {Dialog} from "vant";

export default {
  name: 'constructionFilling',
  components: {navBar},
  props: {},
  data() {
    return {
      queryOptions: '', // 从路由中获取的参数
      isShow: false,//顶部导航控制
      imgUrl: require('../../../static/controlImg/selectall_false.png'),
      chooseImgUrl: require('../../../static/controlImg/selectall_true.png'),
      projectName: '',
      engineeringId: '', // 下拉工程名称 id
      siteName: '',
      siteId: '',// 下拉站点id
      showSelectProject: false,
      projectNameColumns: [],
      showSelectSite: false,
      siteNameColumns: [],
      taskList: [],// 循环整个content
      isShowActive: -1, // 控制左侧选中样式
      ischildActive: -1, // 控制左侧选中样式
      isActive: true, // 控制右侧安装样式
      netypeList: [],
      isConcealed: true,
      isSubmit: true,
      isCheckbox: false,
      isSelectAllbox: false,
      pickerName: "",
      equId: '',
      engrId: '', // 左侧传参
      selectedIds: [],//保存选中的id
    }
  },
  created() {
  },
  onLoad(option) {
    this.queryOptions = JSON.parse(decodeURIComponent(option.options))
    this.getNetypeMsgAndStati()
  },
  computed: {
    ...mapGetters(['userData']),
    // 保存的数组去重
    uniqueSelectedIds() {
      return [...new Set(this.selectedIds)];
    }
  },
  watch: {},
  methods: {
    // 全选 根据按钮返回的状态值 判断全选状态进行赋值
    // 通过重复点击两次全选按钮实现选中和取消选中的切换
    // 只允许选择状态为"待提交"的列表项 并对比保存中的id或者进行数组是否包含 进行赋值
    selectAll() {
      this.isCheckbox = false
      this.isShow = !this.isShow
      this.isSelectAllbox = !this.isSelectAllbox
      let selectAllStatus = false;
      // 判断当前全选状态
      if (!this.isSelectAllbox) {
        selectAllStatus = false;
      } else {
        selectAllStatus = true;
      }
      this.taskList.forEach(item => {
        if (item.STATUS_NAME === '待提交') {
          item.selected = selectAllStatus;
          if (item.selected && !this.selectedIds.includes(item.OBJ_ID)) {
            this.selectedIds.push(item.OBJ_ID);
          } else if (!item.selected && this.selectedIds.includes(item.OBJ_ID)) {
            const index = this.selectedIds.indexOf(item.OBJ_ID);
            if (index > -1) {
              this.selectedIds.splice(index, 1);
            }
          }
        }
      });
    },
    goSave() {
      let params = {
        fillDetailIds: this.selectedIds
      }
      this.$apiRequest.gcgkApi.getCommitFill(params).then(res => {
        if (res.msg == '提交成功') {
          this.getNeList();
        }
      })
    },
    // 多选 切换按钮 取消全选的操作 切换列表项的selected属性的值 实现多选和取消多选的功能
    // 只允许选择状态为 待提交 的列表项
    onChangeCheckbox() {
      this.isShow = false
      this.isSelectAllbox = false
      this.isCheckbox = !this.isCheckbox;
      this.taskList.forEach(item => {
        if (item.STATUS_NAME === '待提交') {
          item.selected = !item.selected;
          if (item.selected && !this.selectedIds.includes(item.OBJ_ID)) {
            this.selectedIds.push(item.OBJ_ID);
          } else if (!item.selected && this.selectedIds.includes(item.OBJ_ID)) {
            const index = this.selectedIds.indexOf(item.OBJ_ID);
            if (index > -1) {
              this.selectedIds.splice(index, 1);
            }
          }
        }
      });
    },
    // 列表点击
    // 先判断按钮状态 切换对应列表项的selected属性的值
    // 并根据选中状态更新selectedIds数组
    // 同时 只允许选择状态为"待提交"的列表项
    chooseItem(item) {
      if (this.isCheckbox === true || this.isSelectAllbox === true) {
        if (item.STATUS_NAME !== '待提交') {
          return;
        }
        item.selected = !item.selected;
        if (item.selected) {
          if (!this.selectedIds.includes(item.OBJ_ID)) {
            this.selectedIds.push(item.OBJ_ID);
          }
        } else {
          const index = this.selectedIds.indexOf(item.OBJ_ID);
          if (index > -1) {
            this.selectedIds.splice(index, 1);
          }
        }
      }
    },
    // 获取配置总项
    getNetypeMsgAndStati() {
      let params = {
        engId: this.queryOptions.engId,
        stationId: this.queryOptions.siteId
      }
      this.$apiRequest.gcgkApi.getNetypeMsgAndStati(params).then(res => {
        this.netypeList = res.data.netypeList
      })
    },
    // 左侧一级点击
    onchangeTab(item, index) {
      this.isShowActive = this.isShowActive === index ? -1 : index;
      if (item.netypeRecords == undefined) {
        this.engrId = item.engr_type
        this.getNeList()
      }
    },
    // 左侧二级点击
    onchangeChildTab(item, index) {
      this.ischildActive = this.ischildActive === index ? -1 : index;
      this.engrId = item.ne_type
      this.getNeList()
    },
    // 获取右侧列表
    getNeList() {
      let params = {
        netypeId: this.engrId,
        engId: this.queryOptions.engId,
        stationId: this.queryOptions.siteId
      }
      this.$apiRequest.gcgkApi.getNeList(params).then(res => {
        this.taskList = res.data.map(item => {
          item.selected = false
          if (item.STATUS_EXAM == 2 || item.STATUS_EXAM == 3 || item.STATUS_EXAM == 9 || item.STATUS_EXAM == -1) {
            item.STATUS_NAME = '已提交'
          }
          return {...item}
        })
      })
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/communicationControl/workbench/projectList/projectDetails?options=' + encodeURIComponent(JSON.stringify(this.queryOptions))+'&entrytype=gclist'
      })
    },
    jump(type, item) {
      if (this.isCheckbox === true || this.isSelectAllbox === true) return;
      if (type === 'construction') {
        let options = {
          ...this.queryOptions,
          equId: item.OBJ_ID,
          neSn: item.NE_SN,
        }
        uni.navigateTo({
          url: `/pages/communicationControl/completed/constructionDetails?options=${encodeURIComponent(JSON.stringify(options))}`
        })
      } else {
        // uni.navigateTo({
        //   url: `/pages/communicationControl/workbench/constructionFilling/filling?index=1&equId=${item.OBJ_ID}`
        // })
      }

    }

  }
}
</script>

<style lang="scss" scoped>
.task-monitor-main {
  height: 100vh;
  background: #F2F6FA;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .nav-header {
    margin-right: px2vw(65);

    img {
      width: px2vw(62);
      height: px2vh(45);
      vertical-align: middle;
      margin-right: px2vw(10);
    }

    text {
      vertical-align: middle;
    }
  }

  .nav-text {
    margin-right: px2vw(30);
  }

  .selectall {
    color: #FFFC16;
  }

  /deep/ .header-menu .right-btn {
    right: px2vw(28);
  }

  .imgTitle {
    font-size: px2vh(48)
  }

  .contentwrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .commonbj {
      background-color: #fff;
    }

    .title {
      text-align: center;
      height: px2vh(130);
      line-height: px2vh(130);
      border-bottom: 1px solid #dbdbdb;
      flex-shrink: 0;
      box-sizing: border-box;
      box-shadow: -2px 0px 18px 2px #dbdbdb;
    }

    .content {
      // margin-top: px2vh(30);
      display: flex;
      flex: 1;

      .devicetypelist {
        width: px2vh(260);
        flex-shrink: 0;
        background-color: #ffffff;
        color: #333333;
        font-size: px2vh(36);

        .selectTree {
          background: #F2F6FA;
          color: #417ADC;

        }

        .titlename {
          height: px2vh(130);
          line-height: px2vh(130);
          border-bottom: 1px solid #dbdbdb;
          text-align: center;
        }

        .secondlist {
          text-align: center;
          line-height: px2vh(130);

          view {
            border-bottom: 1px solid #E5E5E5;
            background-color: #F2F6FA;
          }
        }
      }

      .devices {
        flex: 1;
        padding: 0 px2vh(30);
        box-sizing: border-box;

        .deviceItem {
          width: 100%;
          height: px2vh(272);
          border-radius: px2vh(20);
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          position: relative;
          margin-bottom: px2vh(30);

          .deviceItemTitle {
            height: px2vh(120);
            line-height: px2vh(120);
            font-size: px2vh(48);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 px2vh(40);
            border-bottom: px2vh(2) solid #E5E5E5;
            flex-shrink: 0;
            .name {
              font-size: px2vh(34);
              width: px2vw(450);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .statebox {
              display: flex;
              align-items: center;
              position: absolute;
              right: px2vw(0);
              .ishide {
                background-color: rgba(65, 122, 220, .1);
                color: #417ADC;
                width: px2vh(80);
                height: px2vh(56);
                font-size: px2vh(36);
                border-radius: px2vh(10);
                text-align: center;
                line-height: px2vh(56);
                margin-right: px2vh(20);
                position: relative;
                right: px2vw(100);
              }

              .state {
                width: px2vh(160);
                height: px2vh(56);
                text-align: center;
                line-height: px2vh(56);
                background-color: rgba(255, 112, 112, .1);
                color: #FF7070;
                font-size: px2vh(36);
                border-radius: px2vh(10);
                position: relative;
                transform: rotate(45deg) scale(0.8);
                position: absolute;
                top: px2vh(-10);
                right: px2vw(-10);
              }
            }

          }

          .deviceItemLabel {
            flex: 1;
            display: flex;
            margin: 0 px2vh(30);
            box-sizing: border-box;

            .steps {
              flex: 1;
              display: flex;
              align-items: center;

              .stepItem {
                width: px2vh(105);
                height: px2vh(68);
                flex-shrink: 0;
                line-height: px2vh(68);
                background-color: rgba(140, 140, 140, .1);
                color: #8C8C8C;
                font-size: px2vh(32);
                margin-right: px2vh(30);
                border-radius: px2vh(8);
                position: relative;
                text-align: center;

              }

              .stepItem:last-child {
                // width: px2vh(145);
                flex: 1.5;
              }

              .stepItem::after {
                content: "";
                width: px2vh(30);
                height: px2vh(8);
                display: inline-block;
                background-color: #ECF1FB;
                left: px2vh(105);
                position: absolute;
                top: 50%;
                margin-top: px2vh(4);
              }

              .stepItem:last-child::after {
                display: none;
              }

              .active {
                background: rgba(65, 122, 220, .1);
                color: #417ADC;
              }
            }

          }

        }

        .chooseList {
          border: px2vh(4) solid #417ADC;
        }

        .active {
          border: px2vh(2) solid #417ADC;
          box-sizing: border-box;
        }

      }

    }

    footer {
      flex-shrink: 0;
      height: px2vh(180);
      background: #FFFFFF;
      border-top: px2vh(1) solid #E5E5E5;
      box-sizing: border-box;
      padding-top: px2vh(28);

      /deep/ .van-button {
        width: calc(100% - #{px2vw(60)});
        margin-left: px2vh(30);
        height: px2vh(120);
        color: #fff;
        background-color: #417ADC;
        border: 1px solid #417ADC;
        border-radius: px2vh(60);
      }
    }
  }
  /deep/ .van-field__control:disabled {
    color: #333;
    -webkit-text-fill-color: #333;
  }
}
</style>
